/* Website Happy Birthday */

 /* Project 1 */

 /* Happy Birthday Animation with Fireworks and Balloons. */
 /* Created By WinandaDev on 25 August 2025. */
 /* For my sister Kirana, date of birth 18 November 2010. */
 /* ===================================================== */

/* Bagian utama: mengatur ukuran dan tampilan dasar body dan html */
html, body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* Mengatur canvas agar fullscreen dan tidak ada scroll */
canvas {
  width: 100vw !important;
  height: 100vh !important;
  min-width: 100vw;
  min-height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

/* Efek glow/blur animasi di belakang tombol bulat */
.Tombol::before {
  content: '';
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  border-radius: 50%;
  background: conic-gradient(
    #00f0ff, #ff00ea, #fff200, #00f0ff
  );
  filter: blur(8px);
  z-index: -1; /* pastikan glow di belakang tombol */
  animation: glow-rotate 2s linear infinite;
  opacity: 0.8;
}

/* Keyframes untuk animasi rotasi glow di tombol */
@keyframes glow-rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Style utama tombol bulat (misal untuk suara atau pengaturan) */
.Tombol {
  border-radius: 50%;   /* membuat bentuk bulat */
  width: 45px;         /* ukuran lingkaran */
  height: 45px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mengatur gambar di dalam tombol agar bulat dan tidak bisa di-drag */
.Tombol img {
  border-radius: 50%;   /* membuat bentuk bulat */
  width: 45px;          /* sesuaikan ukuran gambar */
  height: 45px;
  position: fixed;
  background: white;
  /* supaya tidak bisa di download gambar dan lain sebagainya */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 2;
}

/* Efek shadow saat tombol di-hover */
.Tombol:hover {
  box-shadow: 0 0 0 1px #000000,
  0 0 0 5px #0c78d0;
}

/* Style untuk teks ucapan dari kakak Winanda (gradient berjalan) */
.TeksKanan {
  font: 17px "Poppins";
  font-weight: 800;
  white-space: nowrap;
  color: white;
  background: linear-gradient(to right,
    #ffb347, #ff6f91, #f9f871, #6fd6ff, #a1ffce, #ffb347);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gerakjalan 1.7s linear infinite;
  z-index: 1;
  /* supaya tidak bisa di select atau blok */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge lama */
  user-select: none;         /* Standar modern, termasuk Chrome */
}

/* Keyframes untuk animasi gradient berjalan pada teks */
@keyframes gerakjalan {
  to {
    background-position: 200%;
  }
}

/* Menghilangkan border dan background pada elemen audio */
audio,
audio:focus,
audio:active,
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 12px !important;
}

/* Menghilangkan efek tap highlight dan border pada tombol di HP */
.Tombol,
.Tombol:focus,
.Tombol:active,
.Tombol img,
.Tombol img:focus,
.Tombol img:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border: none;
  box-shadow: none;
  border-radius: 50%;
}